<template>
  <div>
    <el-button type="primary" icon="el-icon-plus" @click="showAddDialog"
      >添加</el-button
    >
    <!-- table组件在展示动态数据的时候，依赖的是data属性
    data属性值，必须是一个数组，表格组件才能展示 
    这个data会默认给每个列传一份，每个列的内部是在展示我们传递进去的数据
    列的内部展示数据的时候，如果需要额外的结构，那么需要由父组件决定（作用域插槽）-->

    <!-- 每个列有一个prop属性，专门用于指定显示这个数据的时候显示哪个属性 -->
    <el-table :data="trademarkList" border style="width: 100%; margin: 20px 0">
      <el-table-column type="index" align="center" label="序号" width="80">
      </el-table-column>
      <el-table-column prop="tmName" label="品牌名称" width="width">
      </el-table-column>
      <el-table-column label="品牌LOGO" width="width">
        <!-- row代表当前遍历的这一项   $index代表下标 -->
        <template slot-scope="{ row }">
          <img :src="row.logoUrl" alt="x" style="width: 100px; height: 100px" />
        </template>
      </el-table-column>
      <el-table-column prop="prop" label="操作" width="width">
        <template slot-scope="{ row }">
          <el-button
            type="warning"
            icon="el-icon-edit"
            size="mini"
            @click="showUpdateDialog(row)"
            >修改</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteTrademark(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--  
              -->
    <!-- 分页器 -->
    <el-pagination
      style="text-align: center"
      layout="prev, pager, next,jumper,->,sizes,total"
      @current-change="getTrademarkList"
      @size-change="handleSizeChange"
      :page-sizes="[3, 5, 10]"
      :page-count="5"
      :current-page="page"
      :page-size="limit"
      :total="total"
    >
    </el-pagination>

    <!-- 添加或者修改的弹出对话框（页面） dialogFormVisible 打开或关闭对话框-->
    <el-dialog
      :title="tmForm.id ? '修改品牌' : '添加品牌'"
      :visible.sync="dialogFormVisible"
    >
      <el-form style="width: 80%" :model="tmForm" :rules="rules" ref="tmForm">
        <el-form-item label="品牌名称" label-width="100px" prop="tmName"
          ><!--prop ???? -->
          <el-input v-model="tmForm.tmName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="品牌LOGO" label-width="100px" >
          <el-upload
            class="avatar-uploader"
            action="/dev-api/admin/product/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="tmForm.logoUrl"
              :src="tmForm.logoUrl"
              class="avatar"
            /><!-- 预览上传成功的图片 -->
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdateTrademark"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Trademark",
  data() {
    //自定义校验
    var validatePasstmName = (rule, value, callback) => {
      //callback这个函数代表验证通过还是不通过
      //调用函数的时候传递参数，代表不通过，一般传递的都是错误对象
      //调用函数的时候不传递参数，代表通过
      if (value.length < 2 || value.length > 10) {
        callback(new Error("品牌名称在2-10之间"));
      } else {
        callback();
      }
    };

    return {
      page: 1,
      limit: 3,
      trademarkList: [],
      total: 0,

      dialogFormVisible: false, //打开或关闭对话框
      // imageUrl: '',//上传图片的数据

      // 收集数据的时候，要先明白自己要收集成什么东西，我们需要从接口文档上去查看发请求的额参数是啥
      // 下面这个对象就是添加品牌所要收集的对象
      tmForm: {
        tmName: "",
        logoUrl: "",
      },
      //rules对象和收集数据的对象tmForm内部属性名是一样的
      //每个属性的数据是一个数组，代表着这个字段的校验规则数组
      //数组内部是一个一个的对象，每个对象代表着一个校验规则
      rules: {
        tmName: [
          { required: true, message: "请输入品牌名称", trigger: "blur" },
          // { min: 2, max: 10, message: '长度在 2到 10 个字符', trigger: 'change' }
          { validator: validatePasstmName, trigger: "change" },
        ],
        logoUrl: [
          //因为我们是上传的组件，不是表单元素，所以我们没办法使用blur或者change去触发
          //整体校验的时候，会触发
          { required: true, message: "请选择上传图片" },
        ],
      },
    };
  },
  mounted() {
    this.getTrademarkList();
  },
  methods: {
    //通过接口文档，我们要拿到records对象数组和total总条数
    async getTrademarkList(page = 1) {
      this.page = page;
      try {
        const result = await this.$API.trademark.getPageList(
          this.page,
          this.limit
        );
        if (result.code === 200 || result.code === 20000) {
          this.trademarkList = result.data.records;
          this.total = result.data.total;
        } else {
          alert("获取品牌列表失败");
        }
      } catch (error) {
        alert("请求获取品牌列表失败");
      }
    },
    // handleCurrentChange(page){
    //       this.page = page
    //       this.getTrademarkList() //再重新请求下数据
    // }

    //修改每一页显示的数量
    handleSizeChange(size) {
      this.limit = size;
      this.getTrademarkList(); //再重新请求下数据
    },

    //上传图片的框
    handleAvatarSuccess(res, file) {
      this.tmForm.logoUrl = res.data || file.response.data; //把图片上传成功的网络路径存到tmForm.logoUrl
      // 下面拿的是本地的图片路径，上传是不需要本地图片路径的
      // this.imageUrl = URL.createObjectURL(file.raw);
    },

    //上传之前，检查图片大小及格式符不符合要求
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    //点击添加按钮弹出添加的dialog页面
    showAddDialog() {
      this.dialogFormVisible = true;
      // 解决添加之后取消，再次点击添加，数据还存在的问题
      // 每次点击添加按钮，需要清空数据
      this.tmForm = {
        tmName: "",
        logoUrl: "",
      };
    },

    //点击'修改按钮'，弹出dialog
    showUpdateDialog(row) {
      (this.dialogFormVisible = true), //打开对话框
        // 把要修改的品牌对象地址赋值给tmForm，那么tmForm当中就自动有了tmName和logoUrl，还多了个id
        //修改操作，tmForm对象中会多一个id，添加是没有的，所以要把row解构出来再把tmName，logoUrl，id重新放到tmForm中
        (this.tmForm = { ...row });
    },

    //点击确定按钮，添加或者修改品牌
    addOrUpdateTrademark() {
      this.$refs.tmForm.validate(async (valid) => {
        if (valid) {
          //整体校验成功

          // 1、获取收集好的参数数据
          // 2、整理收集好的参数数据(需要整理再整理)
          // 3、发送请求
          // 4、成功干啥
          // 5、失败干啥
          let trademark = this.tmForm;
          try {
            const result = await this.$API.trademark.addOrUpdate(trademark);
            if (result.code === 200 || result.code === 20000) {
              //提示用户修改品牌成功还是添加品牌成功？
              this.$message.success(
                trademark.id ? "修改品牌成功" : "添加品牌成功"
              );
              //关闭dialog
              this.dialogFormVisible = false; //关闭对话框
              //根据是添加还是修改，返回列表页，重新发请求，传递页码（获取数据的页码是不同的）
              this.getTrademarkList(trademark.id ? this.page : 1);
            } else {
              //提示用户修改品牌失败还是添加品牌失败？
              alert(trademark.id ? "修改品牌失败" : "添加品牌失败");
            }
          } catch (error) {
            alert(trademark.id ? "请求修改品牌失败" : "请求添加品牌失败");
          }
        } else {
          console.log("请完善填写");
          return false;
        }
      });
    },

    //点击删除，实现删除某一条
    deleteTrademark(row) {
      //row.id
      this.$confirm(`你确定删除${row.tmName}吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          //发送删除请求
          try {
            const result = await this.$API.trademark.remove(row.id);
            if (result.code === 200 || result.code === 20000) {
              this.$message.success("删除品牌成功");
              this.getTrademarkList(
                this.getTrademarkList.length > 1 ? this.page : this.page - 1
              );
            } else {
              this.$message.error("删除品牌失败");
            }
          } catch (error) {
            this.$message.error("请求删除品牌失败");
          }
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>